<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>家居</title> 
<%@ include file="../shared/common_header.jsp"%>
<style type="text/css">
	#shop .control-content  .bar{
		position:absolute;
	}
</style>
</head>
<body>

	<section id='shop'>
		<nav class="bar bar-tab">
			  <c:if test="${fn:length(Groups)>0  }">
				<c:forEach var="item" items="${Groups }"> 
					<c:if test="${selectGroup  == item.id }">
						<a class="tab-item active" href="#" value='${item.id }'> 
							<span class="tab-label">${item.name }</span>
						</a>
					</c:if> 
					<c:if test="${selectGroup  != item.id }">
						<a class="tab-item" href="#" value='${item.id }'> 
							<span class="tab-label">${item.name }</span>
						</a>
					</c:if> 
				</c:forEach>
				</c:if>
		</nav>
		<div class="content">
		 <c:if test="${fn:length(products)>0  }">
				<c:forEach var="item" items="${products }"> 
			<div class="control-content" value='${item.id }'>
				<div>
						<img alt="" src="${item.mainimageurl}">
					<div class='bar'>
						<div class='productDescriptor'>
							<div class='productName'>${my:getMaxLengthString(item.name,13) }</div>
							<div class='productPrice'>￥${item.price }</div>
							<div class='productOrgPrice'>￥${item.originalcost }</div>
						</div>
						<!-- 
						<div class='productBuy'>
							<button class="btn btnbuy text-gold" value='${item.id }'>购买</button>
						</div> -->
						
					</div>
				</div>
			</div>
			</c:forEach>
			</c:if>
  			 
		</div>
		
	</section>
	<script type="text/javascript">
		$(function(){
			$("#shop nav a").bind("click",function(e){
				var groupId=$(e.currentTarget).attr("value");
				
				window.location.href=window.location.href.split('?')[0]+"?groupId="+groupId;
			});
			$(".btnbuy").bind('click',function(e){
				var productid=$(e.currentTarget).attr("value");
				window.location.href='${ROOT_PATH }Shop/ShoppingCart?addProductId='+productid;
			})
			$(".control-content").bind('click',function(e){
				var productid=$(e.currentTarget).attr("value");
				window.location.href='${ROOT_PATH }Shop/ItemDetails?itemId='+productid;
			});
			//适配布局
			(function(){
				var width=$('.control-content').width(); 
				var height=$('.control-content').height();
				var ch=width-140;
				height=height+ch;
				$('.control-content').height(height);
				var ctop=$('.control-content .bar').css('top');
				ctop = parseInt(ctop.substring(0,ctop.length-2)); 
				$('.control-content .bar').css('top',(ctop+ch)+'px');
				$('.control-content img').width(width);
				$('.control-content img').height(height);
			})();
		})
	</script>

</body>
</html>